<template>
	<footer class="footer">
		<ul class="nav">
			<li v-for="(item,i) in avatar" :key="i" :class="item.activate ? 'activate':'no'">
				<router-link :to="item.src">
					<template v-if="item.name === '购物车'">
						<em v-if="cartLength.length" v-text="cartLength.length"></em>
					</template>
					<img :src="i ===idx ? item.activateAvatar:item.avatar" alt="">
					<span v-text="item.name"></span>
				</router-link>
			</li>
		</ul>
	</footer>
</template>

<script type="text/ecmascript-6">
    import {createNamespacedHelpers} from "vuex";
    const {mapState} = createNamespacedHelpers("menus");
    export default {
        inject:["reload"],
        data(){
          return {
              //cartLength:this.$store.state.cart.cart,
          }
        },
        computed: {
            /*计算属性*/
            ...mapState(["avatar"]),
	        idx(){//判断当前页面在哪里
                let num = 0;
                for(let j = 0;j<this.avatar.length;j++) {
                    if(this.avatar[j].src  === this.$route.path){ num = j}
                    if(this.$route.path === "/order/list"){
                        num = 3;
                    }
                }
                return num
	        },
            cartLength(){
                let cartLength = this.$store.state.cart.cart;
                return cartLength;
            }
        },
        methods:{//存储方法

	    },
    };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
	.footer
		position fixed
		z-index 9999
		bottom 0
		left 0
		right 0
		.nav
			height 1rem
			padding 0.1rem 0
			display flex
			width 100%
			justify-content space-between
			background-color white
			li
				display flex
				flex-grow 1
				height 100%
				align-items center
				flex-direction column
				justify-content space-around
				font-size 0.22rem
				a
					display flex
					position relative
					flex-grow 1
					height 100%
					align-items center
					flex-direction column
					justify-content space-around
					font-size 0.22rem
					width 100%
					em
						position: absolute
						min-width: .28rem
						line-height: .28rem
						height: .28rem
						box-sizing: border-box
						padding: 0 .05rem
						font-size: .18rem
						overflow: hidden
						text-align: center
						border-radius: .28rem
						background: #ed4d41
						color: #fff
						top: 0
						left: 50%
						-webkit-transform: translate3d(.1rem,-20%,0)
						transform: translate3d(.1rem,-20%,0)
						font-style: normal
					img
						width 0.4rem
						height auto
			.activate
				color #ff6700
			.no
				color #999

</style>